<template>
  <el-menu
      ref="elm"
      @mouseover.stop="changeContent(false)"
      @mouseout.stop="changeContent(true)"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      :close-on-click-outside="true"
      menu-trigger="click"
      :unique-opened="true"
      :popper-offset="0"
      :router="true"
      @select="(e)=>{emit('selector',e)}"
  >
<!--    @click="(e:any)=>{console.log(e); }"-->
    <el-menu-item  route="/employee/info" index="员工资料">
      <el-icon><Collection /></el-icon>
      <template #title>
        <span>员工资料</span>
      </template>
    </el-menu-item>
    <el-sub-menu index="2">
      <template #title>
        <el-icon><UserFilled /></el-icon>
        <span>人事管理</span>
      </template>
      <el-menu-item route="/employee/apprise" index="员工培训">
        <el-icon><CreditCard /></el-icon>
        <template #title>员工培训</template>
      </el-menu-item>
      <el-menu-item route="/employee/rap" index="员工奖惩">
        <el-icon><Present /></el-icon>
        <template #title>员工奖惩</template>
      </el-menu-item>
      <el-menu-item route="/employee/move" index="员工调动">
        <el-icon><Suitcase /></el-icon>
        <template #title>员工调动</template>
      </el-menu-item>
      <el-menu-item route="/employee/salary" index="薪资管理">
      <el-icon><Money /></el-icon>
      <template #title>薪资管理</template>
      </el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="3">
      <template #title>
        <el-icon><Histogram /></el-icon>
        <span>信息统计</span>
      </template>
      <el-menu-item route="/employee/record-chart" index="信息分析">
        <el-icon><DataAnalysis /></el-icon>
        <template #title>信息分析</template>
      </el-menu-item>
      <el-menu-item route="/employee/record-analyze" index="记录分析">
        <el-icon><Tickets /></el-icon>
        <template #title>记录分析</template>
      </el-menu-item>
      <el-menu-item route="/employee/goal-calculate" index="积分统计">
        <el-icon><List /></el-icon>
        <template #title>积分统计</template>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup lang="ts">
import {
  Money,
  UserFilled,
  Collection,
  CreditCard,
  Present,
  Suitcase,
  Histogram,
  Tickets,
  DataAnalysis,
  List
} from '@element-plus/icons-vue'
import {ref} from "vue";
import {ElMenu} from "element-plus";
import {delay} from "@/utils/utils.ts";

const elm = ref<any>()
const isCollapse = ref(true)


const emit = defineEmits(['expand',"selector"])
const handleClick = delay((bool:boolean):void=>{
  isCollapse.value = bool
  emit('expand',!bool)
})

const changeContent = (bool:boolean)=>{

  handleClick(bool?500:100,bool)

}
</script>

<style scoped lang="scss">
.v-enter-to{
  transition: none 0s;
}
</style>